<template>
  <div>
    <van-divider>群组管理</van-divider>
    <van-row type="flex" justify="space-around">
      <van-col>
        <van-field
          readonly
          clickable
          name="picker"
          :value="value"
          label="群组"
          placeholder="选择群组"
          @click="showPicker = true"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="groupColumns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
      </van-col>
      <van-col>
        <van-button style="margin: 10px 0 0 0;" size="mini" icon="plus" type="primary" />
      </van-col>
    </van-row>
    <van-tabs v-model="active">
      <van-tab title="图片管理">
        <van-empty description="图片管理" />
      </van-tab>
      <van-tab title="成员管理">
        <van-row>
          <van-col style="padding: 0 7px;" offset="1"><van-button type="info" size="mini">邀请码</van-button></van-col>
          <van-col style="padding: 0 7px;"><van-button type="info" size="mini">邀请</van-button></van-col>
          <van-col style="padding: 0 7px;" offset="12"><van-button type="danger" size="mini">踢出组</van-button></van-col>
        </van-row>
        <van-search
          v-model="group.searchInput"
          show-action
          placeholder="账号或昵称"
          @search="onSearch"
          shape="round"
        >
          <template #action>
            <div @click="onSearch">搜索</div>
          </template>
        </van-search>
        <van-list
          v-model="group.userList.loading"
          :finished="group.userList.finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell v-for="item in group.userList.list" :key="username" :title="item" />
          <van-cell v-for="item in group.userList.list" :key="nickName" :title="item" />
      </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      group: {
        searchInput: "A3",
        userList: {
          list: [{
            "username": "3",
            "nickName": '5'
          }],
          finished: true,
          loading: true,
        }
      },
      value: "A2",
      groupColumns: ["A1", "A2"],
      showPicker: false,
    };
  },
  methods: {
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
  },
};
</script>

<style lang="css" scoped>
</style>
